<template>
  <view class="whe_maxv xd pad_20 boxs fz_12" style="background-color: #f8faf7">
    <view v-if="list.length==0" class="jz_flex" style="height: calc(100vh - 100px)">
      <view style="width:200px">
        <view>
          <image style="width:200px;height: 160px" src="../img/wdz.png"/>
        </view>
      </view>
    </view>

    <view @click="addressReturn(item)" v-for="(item,index) in list" :key="index"
          class="xyy ba_white boxs bor_10 mag_b_20"
          style="padding: 15px 10px">
      <view class="wh_f">
        <view class="flex_1 fz_16">
          <text class="centerdq wz_hei">{{ item.address }}</text>

          <text class="centerdq mag_l-5" :class="
            item.tag=='家'?'jia':
            item.tag=='公司'?'gongsi':
            item.tag=='学校'?'xuexiao':
            item.tag=='父母'?'fumu':
            item.tag=='朋友'?'pengyou':''
          ">{{ item.tag }}</text>
        </view>
        <view>
          <image @click.stop="upda(item)" src="../../static/icon/bj.png"
          style="width: 16px;height: 16px"/>
          <image @click.stop="delAddress(item.id)" src="../../static/icon/sc.png"
          style="width: 16px;height: 16px;margin-left: 10px"/>
        </view>
      </view>
      <view class="pad_10_0 fz_14 wz_black">
        {{ item.address_all }}
      </view>
      <view class="wz_hui">
        {{ item.name }}
        <text> {{ item.phone }}</text>
        <text v-if="item.is_default" class="mag_l_5" style="border-radius: 3px;padding: 2px 5px;
        background-color: #d5f0dd;color: #3a9e5f"> 默认地址</text>
      </view>
    </view>



    <view style="height: 100px"></view>
    <!--    底部按钮-->
    <view class="pm ba_white box_yy" style="width: 100%;height:100px;left: 0;bottom: 0">
      <view class="wh_f he_max jz_flex fz_16">
        <view @click="submitOrder"
              class="jz_flex wz_white bor_25 mag_r-10"
              style="background-color: #3a9e5f;width: 90%;height: 40px">
          <text>新增收货地址</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import {delReceive, gfReceiveindex} from "../../Api/shop";

export default {
  data(){
    return{
      list:[]
    }
  },
  onShow(){
    this.getList()
  },
  methods:{
    upda(e){
      const params = JSON.stringify(e)
      uni.navigateTo({
        url: `/pagesList/addAddress/index?data=${params}`
      });
    },
    delAddress(e){
      delReceive({
        id:e
      }).then(res=>{
        this.getList()
      })
    },
    getList(){
      gfReceiveindex().then(res=>{
        this.list = res.data
      })
    },
    addressReturn(e){
      uni.$emit('ref',{data:e})
      uni.navigateBack();
      // const params = JSON.stringify(e);
      // // 使用 encodeURIComponent 对参数进行编码
      // uni.navigateTo({
      //   url: `/pages/NextPage/NextPage?address=${params}`
      // });
    },
    submitOrder(){
      uni.navigateTo({
        url: '/pagesList/addAddress/index'
      });
    }
  }
}
</script>
<style scoped lang="scss">
.jia{
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
  background-color: #f9d6d9;
  color: #e63946;
}
.gongsi{
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
  background-color: #cedae8;
  color: #2a5caa;
}
.xuexiao{
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
  background-color: #d5f0dd;
  color: #3a9e5f;
}
.fumu{
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
  background-color: #ffebd5;
  color: #ff9a2e;
}
.pengyou{
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
  background-color: #fff6e0;
  color: #ffd166;
}
.mrdz{
  font-size: 10px;
  border-radius: 3px;
  padding: 2px 5px;
  background-color: #d5f0dd;
  color: #3a9e5f
}
</style>
